<template>
	<view>
		<header>
			<nav>
				<image :src="data.icon" style="width: 40px;height: 40px;"></image>
				<ul>
					<li @click="move('features')">简介</li>
					<li @click="move('screenshots')">截图</li>
				</ul>
			</nav>
		</header>
		<scroll-view scroll-y="true" :scroll-into-view="intoView" scroll-with-animation="true">
		<section id="hero" style="background-color: #f7f7f7;">
			<div class="container">
				<h1>{{data.title}}</h1>
				<p>当前版本：{{data.version}}</p>
				<p>软件大小：{{data.size}}</p>
				<p>下载次数：{{data.down}}次</p>
				<p>发布时间：{{$u.timeFrom(new Date(data.time).getTime(),false)}}</p>
				<div class="btn" @click="down(data._id)">立即下载</div>
			</div>
		</section>
		<section id="features">
			<div class="container">
				<h2>APP简介</h2>
				<p>{{data.content}}</p>
			</div>
		</section>
		<section id="screenshots" style="background-color: #f7f7f7;">
			<div class="container">
				<h2>截图</h2>
				<div class="gallery">
					<image :src="item" @click="openImg(data.image,index)" v-for="(item,index) in data.image"
						mode="widthFix" style="width: 100%;"></image>
				</div>
			</div>
		</section>	
		</scroll-view>
		<view style="text-align: center;padding: 10px 0;color: #989898;font-size: 13px;">
			模板作者：咩咩
			<websitenav></websitenav>
		</view>
	</view>
</template>

<script>
	export default {
		name: "apk_user_728",
		props: {
			data: {
				type: Object,
				default (data) {
					return {}
				}
			}
		},
		methods: {
			move(e){
				 uni.pageScrollTo({
				      selector: '#'+e,
				      duration: 500
				    });
			},
			down(id) {
				this.$emit("down", {
					id: id
				})
			}
		},
		data() {
			return {
intoView:"hero",
list:["hero","features","screenshots"]
			};
		}
	}
</script>

<style lang="less">
	header {
		background-color: #007bff;
		padding: 10px;
	}

	nav {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	nav ul {
		list-style: none;
		display: flex;
	}

	nav ul li {
		margin-left: 20px;
		color: #fff;
	}
	.container {
		text-align: center;
		padding: 50px 20px;
	}

	.container h1 {
		font-size: 35px;
		margin-bottom: 20px;
	}

	.container h2 {
		font-size: 25px;
		margin-bottom: 20px;
	}

	.container p {
		font-size: 18px;
		margin-bottom: 15px;
	}

	.btn {
		display: inline-block;
		padding: 10px 20px;
		background-color: #007bff;
		color: #fff;
		text-decoration: none;
		border-radius: 5px;
	}
</style>